<template>
	<div class="container">
		<div class="left-container">
			<Icon type="ios-home" size="40" color="rgb(255, 92, 124)"/>
			<p>首页</p>
		</div>
		<div><Divider type="vertical" style="height:100%;" /></div>
		<div class="right-container">
			<div  v-for="(item, index) in list" :key="index">
				<div class="poptip">
					<span class="name">{{item.title}}</span>
					<span class="number">{{item.total}}</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { getArticleTypeList } from "@/api/index"

	export default{
		name: "Menu",
		data(){
			return {
				list: []
			}
		},
		mounted(){
			this.getList()
			
		},
		methods:{
			getList: function(){
				getArticleTypeList().then(res=>{
					this.list = res.data.data
					console.log(this.list)
				})
			}
		}
	}
</script>

<style scoped>
.container{
	width: 100%;
	background-color: #fff;
	border-radius: 10px;
	display: flex;
}

.left-container{
	text-align: center;
	margin-top: 10px;
	margin-left: 20px;
}

.right-container{
	display: flex;
	justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
}

.poptip{
	margin: 10px 8px;
	cursor: pointer;
}

.poptip :hover{
	color: rgb(0, 110, 255);
}

.name{
	font-size: 14px;
}

.number{
	font-size: 12px;
	display: inline-block;
	color:white;
	background-color: #73c9e5;
	margin-left: 5px;
	width: 30px;
	text-align: center;
	border-radius: 5px;
}
</style>